<template>
  <div class="resource">
    <div class="resource-list">
      <el-card class="box-card">
        <template
          #header
          class="clearfix"
        >
          <el-form
            ref="formDom"
            :model="form"
            label-width="80px"
            inline
          >
            <el-form-item
              prop="name"
              label="资源名称"
            >
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item
              prop="url"
              label="资源路径"
            >
              <el-input v-model="form.url" />
            </el-form-item>
            <el-form-item
              prop="categoryId"
              label="资源分类"
            >
              <el-select
                v-model="form.categoryId"
                placeholder="请选择资源分类"
                clearable
              >
                <el-option
                  v-for="item in resourceCategories"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :disabled="isLoading"
                @click="onSubmit"
              >
                查询搜索
              </el-button>
              <el-button
                :disabled="isLoading"
                @click="onReset"
              >
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </template>
        <el-table
          v-loading="isLoading"
          :data="resources"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="编号"
          />
          <el-table-column
            prop="name"
            label="资源名称"
          />
          <el-table-column
            prop="url"
            label="资源路径"
          />
          <el-table-column
            prop="description"
            label="描述"
          />
          <el-table-column
            prop="createdTime"
            label="添加时间"
          />
          <el-table-column
            label="操作"
          >
            <template #default="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-model:current-page="form.current"
          :disabled="isLoading"
          :page-sizes="[5, 10, 20]"
          :page-size="form.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, Ref, ref } from 'vue'
import { getResourceCategories, getResourcePages } from '/@/services/resource.ts'
interface SearchForm {
  name: string
  url: string
  categoryId: number | null
  size: number
  current: number
}
let form: Ref<SearchForm>
const useInit = () => {
  const resourceCategories = ref([{ id: 1, name: '无选项' }])
  onBeforeMount(async () => {
    const { data } = await getResourceCategories()
    resourceCategories.value = data.data
  })
  return {
    resourceCategories
  }
}
const useDataHandle = () => {
  const isLoading = ref(false)
  const resources = ref([])
  const totalCount = ref(0)
  const getList = async (form: SearchForm) => {
    isLoading.value = true // 展示加载中状态
    const { data } = await getResourcePages(form)
    resources.value = data.data.records
    totalCount.value = data.data.total
    isLoading.value = false // 关闭加载中状态
  }
  const handleCurrentChange = () => {
    form.value.current = 1 // 每页大小改变重新查询第1页数据
    getList(form.value)
  }
  const handleSizeChange = (val: number) => {
    form.value.size = val
    form.value.current = 1 // 每页大小改变重新查询第1页数据
    getList(form.value)
  }
  const handleEdit = () => {
    console.log('edit')
  }
  const onSubmit = () => {
    console.log('onSubmit')
  }
  const onReset = () => {
    console.log('onReset')
  }
  onBeforeMount(() => {
    getList(form.value)
  })
  return {
    onSubmit,
    onReset,
    isLoading,
    resources,
    totalCount,
    handleSizeChange,
    handleCurrentChange,
    handleEdit
  }
}
export default defineComponent({
  name: 'ResourceIndex',
  setup () {
    form = ref({ name: '', url: '', categoryId: null, current: 1, size: 10 })
    return {
      form,
      ...useInit(),
      ...useDataHandle()
    }
  }
})
</script>

<style lang="scss" scoped></style>
